import React, { useEffect, useRef } from 'react'
import * as echarts from "echarts"

export default function MyReactEcharts() {
    const mybox = useRef() //{current:div}
    useEffect(() => {
        initEcharts()
    }, [])
    const initEcharts = () => {
        const mychart = echarts.init(mybox.current)
        const option = getOption()
        mychart.setOption(option)
    }
    const getOption = () => {
        return {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };
    }
    return (
        <div ref={mybox} style={{ width: "50%", height: "400px" }}></div>
    )
}
